<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="antd.min.css">
    <script src="vue.min.js"></script>
    <script src="antd.min.js"></script>
</head>
<body>
    <div id="app" style="width: 400px;margin-left: 600px;">
        <a-form :form="form"@submit="doSubmit">
            <h2>注册</h2>
      <a-form-item lable="账号">
          <a-input v-decorator="['userName',{rules:[{required:true,message:'账号不允许为空！！'}]}]"></a-input>
      </a-form-item>
      <a-form-item lable="密码">
        <a-input v-decorator="['passWord',{rules:[{required:true,message:'密码不允许为空！！'}]}]"></a-input>
    </a-form-item>
    <a-form-item>
        <a-button type="primary" html-type="submit">注册</a-button>
    </a-form-item>
    </a-form>
    </div>
   
</body>
<script>
    new Vue({
        el:"#app",
        beforeCreate(){
            this.form=this.$form.createForm(this);
        },
        methods:{
            doSubmit:function(e){
                e.preventDefault();
                this.form.validateFields((err,values)=>{
                    if(!err){
                        this.$message.info(values.userName+"注册成功！")
                    }
                })
            }
        }
    })
</script>
</html>